<template>
  <div class="con-box">
    <div class="box-tit">创建采购单</div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px">
      <el-form-item label="清单名称" prop="name">
        <el-input type="text" v-model="ruleForm.name" maxlength="20" placeholder="请输入清单名称(20字内)"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="synopsis">
        <el-input type="textarea" v-model="ruleForm.synopsis" maxlength="200" placeholder="请输入简介(200字内)"></el-input>
      </el-form-item>
      <el-form-item label="采购类型" prop="type">
        <el-input disabled :value="type.name"></el-input>
      </el-form-item>
      <el-form-item label="提报开始时间" required>
        <el-col :span="24">
          <el-form-item prop="startTime">
            <el-date-picker placeholder="选择日期" v-model="ruleForm.startTime" style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="提报结束时间" required>
        <el-col :span="24">
          <el-form-item prop="endTime">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="ruleForm.endTime"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="订单地址" required>
        <!-- 省 -->
        <el-select v-model="addressForm.province" prop="province" :placeholder="$t('freeShop.pleaseSelect')"
          class="area freeshop-area" @change="selectProvince" :disabled="applyVisible">
          <el-option v-for="province in provinceList" :key="province.areaId" :label="province.areaName"
            :value="province" :disabled="applyVisible">{{ province.areaName }}</el-option>
        </el-select>
        <!-- 市 -->
        <el-select v-model="addressForm.city" prop="city" class="area freeshop-area" @change="selectCity"
          :disabled="applyVisible">
          <el-option v-for="city in cityList" :key="city.areaId" :label="city.areaName" :value="city">
            {{ city.areaName }}
          </el-option>
        </el-select>
        <!-- 区 -->
        <el-select v-model="addressForm.area" class="area freeshop-area" prop="area" @change="selectArea"
          :disabled="applyVisible">
          <el-option v-for="area in areaList" :key="area.areaId" :label="area.areaName" :value="area">
            {{ area.areaName }}
          </el-option>
        </el-select>
        <el-row>
          <el-input style="margin-top: 20px" prop="address" type="text" v-model="ruleForm.address" maxlength="20"
            placeholder="请输入详细地址"></el-input>
        </el-row>
        <el-row v-if="showAddrError" style="color: #f56c6c">请补充完整地址填写</el-row>
      </el-form-item>
      <el-form-item label="提报上限金額" prop="maxMoney">
        <el-input  v-model="ruleForm.maxMoney" maxlength="8" type="number" placeholder="请输入金額(8字符内)"></el-input>
        <span style="color: #e6a23c">提报单总金额上限</span>
      </el-form-item>

      <el-form-item label="设置商品价格可见权限" prop="prodMoneyStatus">
        <el-switch v-model="ruleForm.prodMoneyStatus"></el-switch>
      </el-form-item>

      <el-form-item label="录入提报人" prop="tbRen">
        <div class="box">
          <div class="tbRen">
            <div class="sec" v-for="(item,index) in tbList" :key='index'>
              <span class="name">{{item.name}}</span>
              <span class="tel">{{item.mobile}}</span>
              <span class="bumen">{{item.department}}</span>
            </div>
          </div>
          <el-button class="btn" style="height: 40px;" type="primary" @click="tbRenSele">选择提报人</el-button>

        </div>
      </el-form-item>

      <el-form-item>
        <el-button class="btns" style="margin-left: 250px;" type="primary" @click="submitForm('ruleForm','0')">保存</el-button>
        <el-button  class="btns" style="margin-left: 250px;" type="primary" @click="submitForm('ruleForm','1')">发送</el-button>
      </el-form-item>
    </el-form>

    <!-- //创建提报人弹框 -->
    <addOrEditTbren v-if="showAdd" ref="addOrUpdate" @toggleAddrPop="refreshChange"></addOrEditTbren>
  </div>
</template>

<script>
  import Cookie from 'js-cookie'
  import {
    picDomain
  } from '~/plugins/config.js'
  import {
    _throttle
  } from '~/plugins/util' //防抖和验证
  import addOrEditTbren from '~/components/add-or-edit-tbren'
  // checkPhoneNumber,checkShopName
  export default {
    data() {
      return {
        ruleForm: {
          "submitPersons": [],
          "area": "",
          "areaId": "",
          "address": "",
          "province": "",
          "city": "",
          "cityId": "",
          "provinceId": "",
          "prodMoneyStatus": 1, //产品价格是否可见0可见1不可见
          "name": "",
          "collaborativePurchaseTypeId": "",
          "startTime": "",
          "endTime": "",
          "synopsis": "",
          "status": "",    //0 保存 1 发送
          "maxMoney": ""
        },
        rules: {
          name: [{
            required: true,
            message: '请输入清单名称',
            trigger: 'blur'
          }],

          startTime: [{
            required: true,
            message: '请选择开始日期',
            trigger: 'date',
          }, ],
          endTime: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'date',
          }, ],
          synopsis: [{
            required: true,
            message: '请输入简介',
            trigger: 'blur'
          }],
          province: [{
            required: true,
            message: '请选择省',
            trigger: 'change'
          }],
          city: [{
            required: true,
            message: '请选择省',
            trigger: 'change'
          }],
          area: [{
            required: true,
            message: '请选择省',
            trigger: 'change'
          }],
        },
        addressForm: {
          addr: '', // 详细地址
          addrId: 0, // 地址ID
          province: '',
          provinceId: null,
          postCode: '',
          city: '',
          cityId: null,
          area: '',
          areaId: null,
        },
        provinceList: [],
        cityList: [],
        areaList: [],
        applyVisible: false, // 如果有参数则禁止编辑
        showAddrError: false, //地址错误提示是否显示
        showAdd: false,
        tbList: [],
        type: {},
        editId: ''
      }
    },
    components: {
      addOrEditTbren
    },
    watch: {
      typeArr(val) {
        this.typeArr = val
      }
    },
    created() {
      console.log(this.$route.query)
      //选择提报人返回后显示提报人处理
      if (this.$route.query.arr) {
        //从session中获取edtiId
        this.editId=sessionStorage.getItem('bdEditId')
        this.tbList = this.$route.query.arr
        if (this.tbList.length !== 0) {
          this.ruleForm.submitPersons = this.tbList.map(item => {
            return {
              id: item.id
            }
          })
        }
      }
      //编辑时获取表单详情
      if (this.$route.query.id) {
        this.editId=this.$route.query.id
        this.getDetail(this.$route.query.id)
        console.log('this.editId==='+this.editId)
      }
      //选择提报人返回后显示之前数据的处理
      if(Cookie.get('bdDetail')){
        this.ruleForm=JSON.parse(Cookie.get('bdDetail'))
        Cookie.remove('bdDetail')
        this.addressForm.province = this.ruleForm.province
        this.addressForm.city = this.ruleForm.city
        this.addressForm.area = this.ruleForm.area
        this.addressForm.areaId = this.ruleForm.areaId
        this.addressForm.cityId = this.ruleForm.cityId
        this.addressForm.provinceId = this.ruleForm.provinceId
        console.log(this.addressForm)
        console.log(this.ruleForm)
      }
    },
    mounted() {
      // 设置网页标题
      document.title = '创建采购单'
      this.init()

      // this.auth = { Authorization: Cookie.get('token') }
    },
    methods: {
      //获取表单详情
      getDetail(id) {
        this.$axios.get('/p/cp/info/' + id).then(({
          data
        }) => {
          this.ruleForm = data
          console.log(this.ruleForm)
          this.tbList = data.submitPersons
          this.ruleForm.prodMoneyStatus=this.ruleForm.prodMoneyStatus==0?true:false
          this.addressForm.province = this.ruleForm.province
          this.addressForm.city = this.ruleForm.city
          this.addressForm.area = this.ruleForm.area
          this.addressForm.areaId = this.ruleForm.areaId
          this.addressForm.cityId = this.ruleForm.cityId
          this.addressForm.provinceId = this.ruleForm.provinceId
        })
      },
      //跳转选择提报人
      tbRenSele() {
        sessionStorage.setItem('bdEditId',this.editId)
        this.ruleForm.province = this.addressForm.province
        this.ruleForm.city = this.addressForm.city
        this.ruleForm.area = this.addressForm.area
        this.ruleForm.areaId = this.addressForm.areaId
        this.ruleForm.cityId = this.addressForm.cityId
        this.ruleForm.provinceId = this.addressForm.provinceId
        var expire = new Date(new Date().getTime() + 1 * 60 * 1000)
        Cookie.set('bdDetail',this.ruleForm,{ expires: expire })
        this.$router.push({
          path: '/user-center/xt-tbRenSele'
        })
      },
      // 页面加载获取数据:省份数据
      init() {
        this.listAreaByParentId().then(({
          data
        }) => {
          this.provinceList = data
        })
        //获取采购类型
        this.getType()

      },
      //获取采购类型
      getType() {
        this.$axios.get('/p/cp/type/info').then(({
          data
        }) => {
          this.type = data[0]
          this.ruleForm.collaborativePurchaseTypeId = data[0].id
        })
      },
      //提交表单
      submitForm(formName,status) {

        this.$refs[formName].validate((valid) => {
          this.ruleForm.province = this.addressForm.province
          this.ruleForm.city = this.addressForm.city
          this.ruleForm.area = this.addressForm.area
          this.ruleForm.areaId = this.addressForm.areaId
          this.ruleForm.cityId = this.addressForm.cityId
          this.ruleForm.provinceId = this.addressForm.provinceId
          this.ruleForm.submitPersons=this.tbList.map(item=>{
            return {
              id:item.id
            }
          })
          this.ruleForm.prodMoneyStatus=this.ruleForm.prodMoneyStatus?0:1
          //地址是否选择的校验
          if (
            this.ruleForm.province == '' ||
            this.ruleForm.city == '' ||
            this.ruleForm.area == ''
          ) {
            this.showAddrError = true
            return
          }else{
            this.showAddrError=false
          }
          this.ruleForm.status = status
          console.log( this.ruleForm.status)
          if (valid) {
            console.log(this.ruleForm)
            this.$axios({
              method: this.editId ? 'put' : 'post',
              url: this.editId ? '/p/cp/update' : '/p/cp/add',
              data: this.ruleForm
            }).then(({
              data
            }) => {
              this.$message({
                message: this.editId ? '修改成功' : '添加成功',
                type: 'success',
                duration: 1000
              })
              this.$router.push({
                path:'./xt-index'
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      /**
       * 省市区
       */
      listAreaByParentId(pid) {
        if (!pid) {
          pid = 0
        }
        return this.$axios.get('/p/area/listByPid', {
          params: {
            pid
          }
        })
      },
      /**
       * 选择省
       */
      selectProvince(val) {
        // 设置省id
        this.addressForm.provinceId = val.areaId
        this.addressForm.province = val.areaName
        // 将市和区的值清除
        this.addressForm.cityId = null
        this.addressForm.city = ''
        this.addressForm.areaId = null
        this.addressForm.area = ''
        // 获取城市的select
        this.listAreaByParentId(this.addressForm.provinceId).then(({
          data
        }) => {
          this.cityList = data
        })
      },
      /**
       * 选择市
       */
      selectCity(val) {
        // 设置市id
        this.addressForm.cityId = val.areaId
        this.addressForm.city = val.areaName
        // 将区域的值清除
        this.addressForm.areaId = null
        this.addressForm.area = ''
        // 获取区域的select
        this.listAreaByParentId(this.addressForm.cityId).then(({
          data
        }) => {
          this.areaList = data
        })
      },
      /**
       * 选择区
       */
      selectArea(val) {
        // 设置区id
        this.addressForm.areaId = val.areaId
        this.addressForm.area = val.areaName
      },
    },

  }
</script>
<style scoped src='~/assets/css/uc-edit.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style scoped>
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  input[type=date],
  button,
  select,
  input[type=text] {
    border: 1px solid #dcdfe6 !important;
  }

  .el-input__inner {
    border: 1px solid #dcdfe6 !important;
  }

  .el-form-item.is-error .el-input__inner,
  .el-form-item.is-error .el-input__inner:focus,
  .el-form-item.is-error .el-textarea__inner,
  .el-form-item.is-error .el-textarea__inner:focus {
    border-color: #f56c6c !important;
  }

  .el-select .el-input .el-select__caret {
    line-height: 60px !important;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .box {
    display: flex;
  }

  .box .tbRen {
    margin-right: auto;
    width: 400px;
    display: flex;
    flex-direction: column;
  }

  .box .tbRen .tel {
    margin: 0 20px;
  }

  .box .tbRen .sec {
    margin-bottom: 10px;
  }
  .btns {
    width: 100px;
    margin-top: 150px;
  }
</style>
